<template>
  <view class="photo-look-section">
    <button @click="downloadNetworkImage">下载网络图片并显示</button>
    <view v-if="downloadProgress > 0 && downloadProgress < 100" class="progress">
      下载进度：{{downloadProgress}}%
    </view>
    <image v-if="networkImage" :src="networkImage" mode="widthFix" class="image-preview"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      networkImage: '',
      downloadProgress: 0
    }
  },
  methods: {
    downloadNetworkImage() {
      this.downloadProgress = 0;
      uni.downloadFile({
        url: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
        success: (res) => {
          if (res.statusCode === 200) {
            this.networkImage = res.tempFilePath;
            uni.showToast({ title: '下载成功' });
          } else {
            uni.showToast({ title: '下载失败', icon: 'none' });
          }
        },
        progress: (progressRes) => {
          this.downloadProgress = progressRes.progress;
          console.log(`已下载：${progressRes.totalBytesWritten} 字节 / 总计：${progressRes.totalBytesExpectedToWrite} 字节`);
        },
        fail: (err) => {
          console.error('图片下载失败：', err);
          uni.showToast({ title: '网络异常，下载失败', icon: 'none' });
        },
        complete: () => {
          setTimeout(() => {
            this.downloadProgress = 0;
          }, 3000);
        }
      });
    }
  }
}
</script>

<style>
.photo-look-section {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.progress {
  margin-top: 20rpx;
  color: #2979ff;
  text-align: center;
  font-size: 28rpx;
}

.image-preview {
  width: 100%;
  margin-top: 20rpx;
  border-radius: 8rpx;
}
</style>